@import './reset';
.container{
	width: 100%;
	background: #F5F8FA;
	overflow: hidden;
	box-sizing: border-box;
	.top{
		width: 100%;
		height: auto;
		.top-banner{
			width: 100%;
			height: calculateRem(140px);
		}
		.top-nav{
			width: 100%;
			height: calculateRem(92px);
			background-color: white;
			.nav{
				height: calculateRem(92px);
				max-width: 25%;
				text-align: center;
				&:active{
					background-color: #fafafa;
				}
				>img{
					height: calculateRem(42px);
					width: calculateRem(42px);
					margin-top: calculateRem(12px);
				}
				>span{
					display: block;
					width: 100%;
					height: calculateRem(20px);
					line-height: calculateRem(20px);
					color: #333;
					font-size: calculateRem(14px);
					margin-top: calculateRem(5px);
				}
			}
		}
	}
	.product-wrap{
		width: 100%;
		height: auto;
		background: white;
		margin-top: calculateRem(16px);
		/*margin-bottom: calculateRem(16px);*/
		.title{
			height: calculateRem(32px);
			line-height: calculateRem(47px);
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			>span{
				font-size: 16px;
				color: #333;
				font-weight: bold;
				&:before{
					content: '';
					display: inline-block;
					width: calculateRem(4px);
					height: calculateRem(16px);
					background: #F21612;
					margin-right: calculateRem(8px);
					vertical-align: -2px;
				}
			}
		}
		.lists-wrap{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			.list{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				border-bottom: 1px solid #EAEAEA;
				padding: calculateRem(14px) 0;
				&:active{
					background-color: #fbfbfb;
				}
				.list-l{
					width: calculateRem(80px);
					height: calculateRem(80px);
					margin-right: calculateRem(15px);
					overflow: hidden;
					>img{
						width: 100%;
						height: 100%;
					}

				}
				.list-r{
					max-width: 72%;
					.t{
						width: 100%;
						height: calculateRem(22px);
						line-height: calculateRem(22px);
						font-size: calculateRem(16px);
						color: #333;
						font-weight: bold;
						@include ell;

					}
					.content{
						width: 100%;
						height: calculateRem(60px);
						line-height: calculateRem(20px);
						color: #4b4b4b;
						font-size: calculateRem(14px);
						@include break;
						@include mulell(3);
						overflow: hidden;

					}

				}

			}
			
		}
		.more{
			display: block;
			width: 100%;
			height: calculateRem(48px);
			line-height: calculateRem(48px);
			text-align: center;
			&:active{
				background-color: #fafafa;
			}
			>span{
				color: #FF703A;
				font-size: calculateRem(15px);
				&:after{
					content: '';
					display: inline-block;
					width: calculateRem(14px);
					height: calculateRem(14px);
					background: url(../images/drop-down-normal@2x.png) no-repeat;
					background-size: 100%;
					vertical-align: middle;
					margin-left: calculateRem(4px);

				}

			}
		}


	}



}


/*插件开始*/
.swiper-container {
  width: 100%;
  height: calculateRem(140px); }

.swiper-slide {
  width: 100%;
  height: calculateRem(140px); }

.swiper-slide img {
  width: 100%;
  height: calculateRem(140px); }

.pagination {
  position: absolute;
  z-index: 20;
  right: 20px;
  bottom: 0.83333rem; }

.swiper-pagination-switch {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #b2b2b2;
  margin: 0 0px 5px;
  opacity: 0.8;
  cursor: pointer;
  float: left;
  margin-right: 4px; }

.swiper-active-switch {
  background: #F21612; }

/*插件结束*/